<script setup>
import { useRouter ,useRoute} from "vue-router"
import { ref ,onMounted} from "vue";
import { seetEnterprise , gettIndustry ,editEnterprise , addEnterprise} from '../../../api/company'
import uploadImgFiel from './uploadImgFiel.vue'

const router = useRouter()
const route = useRoute()
const isShow = ref(false)
const title = ref('添加企业')

//返回
const back = ()=>{
  router.back()
}
const form = ref({
    name: null,//企业名称
    legalPerson: null,//企业法人
    registeredAddress: null,//注册地址
    industryCode: null,//行业编号
    businessLicenseUrl: null,//上传文件
    businessLicenseId: null,//上传文件id
    contact: null,//企业联系人
    contactNumber: null//企业联系方式
})
const formRef = ref(null)
const options = ref([])
const tableData = ref([])
const rules = ref({
    name:[ { required:true,message:'必填项，内容不能为空',trigger:'blur' } ],
    legalPerson:[ { required:true,message:'必填项，内容不能为空',trigger:'blur' } ],
    registeredAddress:[ { required:true,message:'必填项，内容不能为空',trigger:'blur' } ],
    industryCode:[ { required:true,message:'必填项，内容不能为空',trigger:'blur' } ],
    businessLicenseUrl:[ { required:true,message:'必填项，内容不能为空',trigger:'blur' } ],
    contact:[ { required:true,message:'必填项，内容不能为空',trigger:'blur' } ],
    contactNumber:[ 
        { required:true,message:'必填项，内容不能为空',trigger:'blur' },
        { pattern:/^1[3-9]\d{9}$/ , message:'请输入正确手机号',trigger:'blur'}
    ],
})
onMounted(() => {
    setTableData()
    upId()
})
const upId =() => {
   if(route.params.name === 'see'){
        title.value = '查看企业'
        isShow.value = true
        getTableData()
    }else if(route.params.name === 'edit'){
        title.value = '编辑企业'
        isShow.value = false
        getTableData()
    }
}
//获取查看数据
const getTableData = async () => {
    const ids = route.params.id
    const res = await seetEnterprise(ids)
    console.log(res.data);
    const {name,id,contact,registeredAddress,industryCode,businessLicenseUrl,businessLicenseId,legalPerson,contactNumber ,industryName} = res.data
    form.value = {industryName,name,id,contact,registeredAddress,industryCode,businessLicenseUrl,businessLicenseId,legalPerson,contactNumber}
    tableData.value = res.data.rent
    // console.log(res.data);
}
//获取行业数据
const setTableData = async () => {
     const res = await gettIndustry()
     options.value = res.data
}
//访问在线地址
const to = (url) => {
    window.open(`https://view.officeapps.live.com/op/view.aspx?src=${url}`,'_blank')
}

//获取文件地址和Id
const transmit = (e) => {
    form.value.businessLicenseId = e.urlId
    form.value.businessLicenseUrl = e.url
    console.log(e);
}

//编辑
const editEnterData =async () => {
    const {industryName,...data} = form.value
    console.log(industryName);
   await editEnterprise(data)
}

//添加
const addEnterData = async () => {
    // eslint-disable-next-line no-unused-vars
    const {industryName,...data} = form.value
    await addEnterprise(data)
    removeForm()
}
//确认按钮
const setMonthCard = () => {
  if(route.params.id === 'add'){
    addEnterData()
  }else{
    editEnterData()
  }
}
//清空表单
const removeForm = () => {
    back()
    formRef.value.resetFields()
}

</script>

<template>
    <div class="setMonthCart">
      <div class="top">
        <div class="left">
          <div class="back iconfont icon-fanhui" @click="back">  返回</div>
          <div class="text">|</div>
          <div class="title">{{title}}</div>
        </div>
        <div class="right">
          黑马管理员
        </div>
      </div>

      <div class="body">
        <el-form inline label-width="204" :model="form" ref="formRef" :rules="rules">
          <el-card>
                <template #header>
                    <div class="header_box">
                    <div>企业信息</div>
                    <div class="hover"></div>
                    </div>
                </template>
            <div class="header_flex">
            <el-form-item label="企业名称" prop="name" style="width: 479px;">
                <span v-if="isShow">{{form.name}}</span>
              <el-input v-else v-model="form.name" placeholder="请输入企业名称" style="width: 380px;"></el-input>
            </el-form-item>
            <el-form-item label="法人" prop="legalPerson" style="width: 479px;">
                <div v-if="isShow">{{form.legalPerson}}</div>
              <el-input v-else v-model="form.legalPerson" placeholder="请输入法人" style="width: 380px;"></el-input>
            </el-form-item>
            <el-form-item label="注册地址" prop="registeredAddress" style="width: 479px;">
                <div v-if="isShow">{{form.registeredAddress}}</div>
              <el-input v-else v-model="form.registeredAddress" placeholder="请输入注册地址" style="width: 380px;"></el-input>
            </el-form-item>
            <el-form-item label="所在行业" prop="industryCode" style="width: 479px;">
                <div v-if="isShow">{{form.industryName}}</div>
                <el-select v-else class="custom-select" v-model="form.industryCode" placeholder="请输入所在行业" >
                    <el-option
                    v-for="item in options"
                    :key="item.industryCode"
                    :label="item.industryName"
                    :value="item.industryCode"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="营业执照" prop="businessLicenseId" style="width: 479px;">
                <img v-if="isShow" style="width: 300px; height: 200px;" :src="form.businessLicenseUrl">
                <uploadImgFiel v-else  @transmit="transmit"/>

            </el-form-item>
            </div>
          </el-card>


          <el-card class="contact">
                <template #header>
                    <div class="header_box">
                    <div>联系人信息</div>
                    <div class="hover"></div>
                    </div>
                </template>
            <div class="header_flex">
            <el-form-item label="企业联系人" prop="contact" style="width: 479px;">
                <div v-if="isShow">{{form.contact}}</div>
              <el-input v-else v-model="form.contact" placeholder="请输入企业联系人" style="width: 380px;"></el-input>
            </el-form-item>
            <el-form-item label="联系电话" prop="contactNumber" style="width: 479px;">
                <div v-if="isShow">{{form.contactNumber}}</div>
              <el-input v-else v-model="form.contactNumber" placeholder="请输入联系电话" style="width: 380px;"></el-input>
            </el-form-item>
            </div>
          </el-card>


          <el-card class="lease" v-if="isShow">
                <template #header>
                    <div class="header_box">
                    <div>租赁记录</div>
                    <div class="hover"></div>
                    </div>
                </template>
            <div class="header_flex">
              <el-table empty-text="暂无数据" :data="tableData" style="width: 100%">
                <el-table-column label="序号" prop="id" width="70"> </el-table-column>
                <el-table-column label="租赁楼宇" prop="name" width="100"> </el-table-column>
                <el-table-column label="合同状态"  width="100">
                    <template #default="{row}">
                       <div class="status">{{ row.status === 0 ? '待生效' : row.status === 1 ?  '已到期' : '已退租' }}</div>
                    </template>   
                </el-table-column>
                <el-table-column label="租赁起止时间" width="220">
                    <template #default="{row}">
                        {{ row.startTime }} 至 {{ row.endTime }}
                    </template>    
                </el-table-column>
                <el-table-column label="租赁合同" width="200"> 
                    <template #default="{ row }">
                        <el-button class="default_but" @click="to(row.contractUrl)"> 
                        {{ row.contractName}}
                        </el-button>
                    </template>
                </el-table-column>
                <el-table-column label="录入时间" prop="createTime" width="180"> </el-table-column>
                <el-table-column label="操作" width="150">
                    <template #default="{ row }">
                        <el-button class="default_but">
                            <a target="_blank" :href="row.contractUrl">合同下载</a>
                        </el-button>
                    </template>  
                </el-table-column>
              </el-table>
            </div>
          </el-card>
        </el-form>
      </div>

        <div class="footer" v-if="!isShow">
        <el-button>重置</el-button>
        <el-button type="primary" @click="setMonthCard">确认</el-button>
        </div>
    </div>


</template>
  
<style scoped>
.custom-select .el-input{
  width: 200px;
}
.default_but{
    text-decoration: none;
    color:#a785ff ;
    font-size: 12px;
    border: none;
}
.default_but:hover{
    background-color: #fff;
    color: #8ba8ff;
}
.default_but a{
    text-decoration: none;
    color:#a785ff ;
    font-size: 12px;
    border: none;
}
.default_but a:hover{
    background-color: #fff;
    color: #8ba8ff;
}
.status{
    text-align: center;
    line-height: 22px;
    width: 52px;
    height: 22px;
    color: #57a5ff;
    border: 1px solid #91d5ff;
    background-color: #e6f7ff;
    font-size: 10px;
}
.but{
    width: 100px;
    height: 32px;
    background-color: #edf5ff;
    color:#a785ff ;
    border: none;
    font-weight: 800;
}
.lease{
    background: #ffffff;
    margin-bottom: 100px;
}
.contact{
    height: 200px;
    background: #ffffff;
    margin-bottom: 100px;
}
.header_flex{
    display: flex;
    flex-wrap: wrap;
}
  .header_box{
    position: relative;
    display: flex;
  }
  /* .hover{
    position: absolute;
    transform: translateX(-20px);
    width: 4px;
    height: 21px;
    background-color: blue;
  } */
  .top{
    position: fixed;
    top: 0;
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    height: 64px;
    background-color: #fff;
    z-index: 999;
  }
  .left{
    display: flex;
  }
  .left .text{
    margin: 0 10px;
    color: #dcdfe5;
  }
  .right{
    margin-right: 2vw;
  }
  
  @font-face {
    font-family: "iconfont"; /* Project id 3539040 */
    src: url('//at.alicdn.com/t/c/font_3539040_xovmc8q3fo.woff2?t=1688310148605') format('woff2'),
         url('//at.alicdn.com/t/c/font_3539040_xovmc8q3fo.woff?t=1688310148605') format('woff'),
         url('//at.alicdn.com/t/c/font_3539040_xovmc8q3fo.ttf?t=1688310148605') format('truetype');
  }
  
  .iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  .icon-you:before {
    content: "\e608";
  }
  
  .icon-fanhui:before {
    content: "\e606";
  }
  .body{
    background: #f4f6f8;
    padding: 20px 130px;
    padding-top: 82px;
  }
  .el-card{
    margin-bottom: 20px;
  }
  .footer{
    position: fixed;
    bottom: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 24px 50px;
    background-color: #fff;
    z-index: 999;
  }
  </style>
  